<template>
	<div class="star">
		<span :class="star" v-for="star in stars"></span>
	</div>
</template>
<script>
	export default {
	  name: 'star',
	  props: ['num'],
	  computed: {
	    stars: function () {
	      var stars = [];
				var int_star = parseInt(this.num/10)
				var harf_star = parseInt(this.num)/10-int_star == 0?false:true
				// if (harf_star == false) {
				// 	for (var i = 0; i < int_star; i++) {
				// 	  stars.push('on')
				// 	}
				// 	for (var i = 0; i < (5-int_star); i++) {
				// 	  stars.push('off')
				// 	}
				// }
				// if (harf_star) {
				// 	for (var i = 0; i < int_star; i++) {
				// 	  stars.push('on')
				// 	}
				// 	stars.push('half')
				//   for (var i = 0; i < (4-int_star); i++) {
				//   stars.push('off')
				// 	}
				// }
				var off_star 
				harf_star==true?off_star=4-int_star:off_star=5-int_star
				if (int_star<=5) {
					for (var i = 0; i < int_star; i++) {
					  stars.push('on')
					}
					if (harf_star) {
						stars.push('half')
					}
					if (off_star!=0) {
						for (var i = 0; i < off_star; i++) {
						  stars.push('off')
						}
					}
				}
				return stars
	    }
	  }
	 }
</script>
<style scoped>
	.star span{
		height: 14px;width: 14px;
		display: inline-block;
		background: no-repeat;
		background-size: 10px 10px;
	}
	.star .on{
		background-image: url(../assets/on.png);
	}
	.star .half{
		background-image: url(../assets/half.png);
	}
	.star .off{
		background-image: url(../assets/off.png);
	}
</style>